import React, { useEffect, useState } from 'react';
import { Button, Table, Switch, notification } from 'antd';
import _ from 'lodash'
import service from '../../../api'
import './Pro.scss'
function Pro(props) {
    const [prolist, setProlist] = useState([])
    //分页
    const [pagination, setPagination] = useState({ current: 0, pageSize: 0 });
    
    //请求产品列表
    var getprolist = async () => {
        var res = await service.pro.pro_list();
        setProlist(res.data.data)
    }

    useEffect(() => {
        getprolist()

    }, [])


    //切换状态
    var toChange = async (proid, checked, type) => {
        //type还没有确认
        var res = await service.pro.pro_updateFlag({ proid, flag: checked, type });
        if (res.data.code == 200) {
            notification.success({ message: 'flag已更改!' })
            var item = prolist.find((item) => item.proid == proid)
            if (item) {
                item[type] = 1 - item[type]         }
   
            //实时更新组件状态
            var newprolist = _.cloneDeep(prolist)
            setProlist(newprolist)
        }
    }
    const columns = [
        {
            title: '序号',
            width: 100,
            key: 'number',
            render: (_, record, index) => <div>{(pagination.current - 1) * pagination.pageSize + index + 1}</div>,
        },
        {
            title: '图片',
            key: 'picture',
            width: 100,
            render: (_, record, index) => <img src={record.img1} />,
        },
        {
            title: '名称',
            key: 'name',
            width: 100,
            render: (_, record, index) => <div>{record.proname}</div>,
        },
        {
            title: '品牌',
            key: 'brand',
            width: 100,
            render: (_, record, index) => <div>{record.brand}</div>
        },
        {
            title: '分类',
            key: 'brand',
            width: 100,
            render: (_, record, index) => <div>{record.category}</div>
        },
        {
            title: '原价',
            key: 'brand',
            width: 100,
            render: (_, record, index) => <div>{record.originprice}</div>
        },
        {
            title: '折扣',
            key: 'brand',
            width: 100,
            render: (_, record, index) => <div>{record.discount}</div>
        },
        {
            title: '销量',
            key: 'brand',
            width: 100,
            render: (_, record, index) => <div>{record.sales}</div>
        },
        {
            title: '是否售卖',
            key: 'issale',
            width: 100,
            render: (_, record, index) => <Switch checked={record.issale == 1} onChange={(checked) => { toChange(record.proid, checked, '') }} />,
        },
        // toChange(checked, record.bannerid)
        {
            title: '是否秒杀',
            key: 'isseckill',
            width: 100,
            render: (_, record, index) => <Switch checked={record.isseckill == 1} onChange={(checked) => { toChange(record.proid, checked, 'isseckill') }} />,
        },
        {
            title: '是否推荐',
            key: 'isrecommend',
            width: 100,
            render: (_, record, index) => <Switch checked={record.isrecommend == 1} onChange={(checked) => { toChange(record.proid, checked, 'isrecommend') }} />,
        },
        {
            title: '操作',
            key: 'action',
            width: 100,
            render: (_, record, index) => <Button danger type="primary" > Delete </Button>,
        },
        // toDelete(record.bannerid) 
    ]
       //页码   
       var onPageChange = (pagination) => {

        setPagination(pagination)
    }
    return (
        <div className='pro-box'>
            <Table className='table' style={{ marginTop: 20 }} columns={columns} dataSource={prolist} onChange={onPageChange}/>
        </div>
    );
}

export default Pro;